<template>
  <div class="systemConfig">
    <el-form
      ref="baseFormRef"
      :model="baseForm"
      :rules="rules"
      label-width="140px"
    >
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="系统图标">
            <div class="img-list">
              <single-img
                modular="system"
                type="annexpic"
                v-model="baseForm.loginIcon"
                tip="登录图标"
              />
              <single-img
                modular="system"
                type="annexpic"
                v-model="baseForm.navigationIcon"
                tip="导航图标"
              />
              <single-img
                modular="system"
                type="annexpic"
                v-model="baseForm.logoIcon"
                tip="LOGO图标"
              />
              <single-img
                modular="system"
                type="annexpic"
                v-model="baseForm.appIcon"
                tip="APP图标"
              />
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="系统名称" prop="sysName">
            <el-input
              v-model="baseForm.sysName"
              clearable
              placeholder="系统名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="系统版本" prop="sysVersion">
            <el-input
              v-model="baseForm.sysVersion"
              maxlength="8"
              readonly
              clearable
              placeholder="系统版本"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司名称" prop="companyName">
            <el-input
              v-model="baseForm.companyName"
              clearable
              placeholder="公司名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="版权信息" prop="copyright">
            <el-input
              v-model="baseForm.copyright"
              clearable
              placeholder="版权信息"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司简称" prop="companyCode">
            <el-input
              v-model="baseForm.companyCode"
              clearable
              placeholder="公司简称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司地址" prop="companyAddress">
            <el-input
              v-model="baseForm.companyAddress"
              clearable
              placeholder="公司地址"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司法人" prop="companyContacts">
            <el-input
              v-model="baseForm.companyContacts"
              clearable
              placeholder="公司法人"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司电话" prop="companyTelePhone">
            <el-input
              v-model="baseForm.companyTelePhone"
              clearable
              placeholder="公司电话"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司邮箱" prop="companyEmail">
            <el-input
              v-model="baseForm.companyEmail"
              clearable
              placeholder="公司邮箱"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="PC端URL" prop="sysComputerUrl">
            <el-input
              v-model="baseForm.sysComputerUrl"
              clearable
              placeholder="https://gl.bringspring.com/jsbos-web/"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="移动端URL" prop="sysMobileUrl">
            <el-input
              v-model="baseForm.sysMobileUrl"
              clearable
              placeholder="https://gl.bringspring.com/jsbos-app/"
            />
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="系统描述" prop="sysDescription">
            <el-input
              v-model="baseForm.sysDescription"
              type="textarea"
              :autosize="{ minRows: 5, maxRows: 10 }"
              placeholder="系统描述"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="small"
              class="saveBtn"
              :loading="btnLoading"
              @click="submitForm('SysConfig')"
              >保存</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import singleImg from "@/components/Upload/SingleImg";
import { updateSystemConfig } from "@/api/system/sysConfig";
export default {
  name: "SysConfigBasicSetting",
  components: { singleImg },
  props: {
    dataForm: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      btnLoading: false,
      baseForm: {
        loginIcon: "",
        navigationIcon: "",
        logoIcon: "",
        appIcon: "",
        sysName: "",
        sysVersion: "",
        companyName: "",
        copyright: "",
        companyCode: "",
        companyAddress: "",
        companyContacts: "",
        companyTelePhone: "",
        companyEmail: "",
        sysComputerUrl: "",
        sysMobileUrl: "",
        sysDescription: "",
      },
      rules: {},
    };
  },
  watch: {
    dataForm() {
      this.baseForm = this.dataForm ? this.dataForm : this.baseForm;
    },
  },
  computed: {
    SysConfig() {
      return {
        category: "SysConfig",
        list: [
          {
            name: "导航图标",
            key: "navigationIcon",
            value: this.baseForm.navigationIcon,
          },
          {
            name: "登录图标",
            key: "loginIcon",
            value: this.baseForm.loginIcon,
          },
          {
            name: "LOGO图标",
            key: "logoIcon",
            value: this.baseForm.logoIcon,
          },
          {
            name: "APP图标",
            key: "appIcon",
            value: this.baseForm.appIcon,
          },
          {
            name: "系统名称",
            key: "sysName",
            value: this.baseForm.sysName,
          },
          {
            name: "系统版本",
            key: "sysVersion",
            value: this.baseForm.sysVersion,
          },
          {
            name: "公司名称",
            key: "companyName",
            value: this.baseForm.companyName,
          },
          {
            name: "版权信息",
            key: "copyright",
            value: this.baseForm.copyright,
          },
          {
            name: "公司简称",
            key: "companyCode",
            value: this.baseForm.companyCode,
          },
          {
            name: "公司地址",
            key: "companyAddress",
            value: this.baseForm.companyAddress,
          },
          {
            name: "公司法人",
            key: "companyContacts",
            value: this.baseForm.companyContacts,
          },
          {
            name: "公司电话",
            key: "companyTelePhone",
            value: this.baseForm.companyTelePhone,
          },
          {
            name: "公司邮箱",
            key: "companyEmail",
            value: this.baseForm.companyEmail,
          },
          {
            name: "PC端URL",
            key: "sysComputerUrl",
            value: this.baseForm.sysComputerUrl,
          },
          {
            name: "移动端URL",
            key: "sysMobileUrl",
            value: this.baseForm.sysMobileUrl,
          },
          {
            name: "系统描述",
            key: "sysDescription",
            value: this.baseForm.sysDescription,
          },
        ],
      };
    },
  },
  methods: {
    /**保存 */
    submitForm(category) {
      this.btnLoading = true;
      console.log("category", category);
      // 基础设置
      if (category == "SysConfig") {
        updateSystemConfig(this.SysConfig)
          .then((res) => {
            this.$message({
              message: res.msg,
              type: "success",
              duration: 1500,
              onClose: () => {
                this.btnLoading = false;
                const sysConfig = {
                  navigationIcon: this.baseForm.navigationIcon, // 导航图标
                  loginIcon: this.baseForm.loginIcon, // 登录图标
                  logoIcon: this.baseForm.logoIcon, // LOGO图标
                  appIcon: this.baseForm.appIcon, // APP图标
                  sysName: this.baseForm.sysName, // 系统名称
                  sysVersion: this.baseForm.sysVersion, // 系统版本
                  companyName: this.baseForm.companyName, // 公司名称
                  copyright: this.baseForm.copyright, // 版权信息
                  // companyCode: this.baseForm.companyCode, // 公司简称
                  // companyAddress: this.baseForm.companyAddress, // 公司地址
                  // companyContacts: this.baseForm.companyContacts, // 公司法人
                  // companyTelePhone: this.baseForm.companyTelePhone, // 公司电话
                  // companyEmail: this.baseForm.companyEmail, // 公司邮箱
                  // sysComputerUrl: this.baseForm.sysComputerUrl, // PC端URL
                  // sysMobileUrl: this.baseForm.sysMobileUrl, // 移动端URL
                  // sysDescription: this.baseForm.sysDescription, // 系统描述
                };
                this.$store.commit("settings/CHANGE_SETTING", {
                  key: "sysConfig",
                  value: sysConfig,
                });
                this.$emit("refreshInit");
              },
            });
          })
          .catch(() => {
            this.btnLoading = false;
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.systemConfig {
  padding: 0;

  .saveBtn {
    width: 100px;
  }

  .img-list {
    display: flex;

    >>> .singleImg-container {
      margin-right: 20px;

      :last-child {
        margin-right: 0;
      }
    }
  }
}
</style>